<template>
    <el-card>
        <div slot="header" v-if="$store.state.user.level.id <=2">
            <el-input
                    style="width:160px"
                    placeholder="搜索 项目名称"
                    prefix-icon="el-icon-search"
                    clearable
                    v-model.lazy="search">
            </el-input>
            <el-button @click="$router.push('/project/create')" type="primary">新建项目</el-button>
        </div>
        <div v-else>项目列表</div>
        <el-table :data="list"
                  :stripe="true"
                  @row-click="open"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column label="项目名称" prop="name"/>
            <el-table-column label="我的角色" prop="role"/>
            <el-table-column label="项目状态" prop="state"/>
        </el-table>

        <el-button :disabled="selected.length === 0" @click="del">删除</el-button>
        <el-pagination :page-size="$store.state.pageSize"
                       :current-page.sync="page"
                       @current-change="fetch"
                       :total="total"
                       background
                       layout="prev, pager, next" class="inline-block"/>
    </el-card>
</template>

<script>
    import Project_search_category from "../component/project_search_category";

    export default {
        components: {Project_search_category},
        data() {
            return {
                search: '',
                total: 0,
                page: 1,
                list: [],
                selected: [],
            };
        },
        methods: {
            fetch() {
                this.$http.get('/api/project', {params: {page: this.page, search: this.search}}).then(res => {
                    this.list = res.data.list;
                    this.list.forEach(item => {
                        if (this.$store.state.user.level.id <= 2) {
                            item.role = '管理员';
                        } else {
                            switch (item.user_project.type) {
                                case 0:
                                    item.role = '项目执行';
                                    break;
                                case 1:
                                    item.role = '项目管理';
                                    break;
                            }
                        }
                        const now = new Date();
                        const start_at = new Date(item.start_at), end_at = new Date(item.end_at);
                        if (start_at > now)
                            item.state = '未开始';
                        else if (end_at < now)
                            item.state = '已结束';
                        else
                            item.state = '执行中';
                    });
                    this.total = res.data.total;
                    this.page = res.data.page;
                });
            },
            open(row, e, column) {
                if (column.type === 'selection')
                    return;
                this.$router.push('/project/' + row.id);
            },
            handleSelectionChange(row) {
                this.selected = row.map(item => item.id);
            },
            del() {
                this.$http.delete('/api/project', {params: {id: this.selected.join(',')}})
                    .then(res => {
                        this.list = this.list.filter(item => {
                            return this.selected.indexOf(item.id) === -1;
                        });
                        this.$message.success('成功删除');
                    })
                    .catch(err => {
                        this.$message.error(err.response.data);
                    });
            },
        },
        watch: {
            search() {
                this.fetch();
            }
        },
        mounted() {
            this.fetch();
        }
    }
</script>

<style scoped>

</style>